<template>
    <div _tmplitem="56" class="dv-full-screen-container" :style="css">
        <div _tmplitem="56" style="position: absolute;width:1920px;height:1080px; background-image: url(http://f.kyform.cn/2023-05-08/fa9c94f3-c866-4d6f-9610-81c180ef1830.png); background-size: contain;background-color:rgba(13, 42, 67);">
            <div _tmplitem="56" class="bigitem" style="top: -3px; left: 651px; width: 574px; height: 88px; transform: translate(0px, 0px); z-index: 1018;">
                <div _tmplitem="56" class="itemcontent " style="opacity:1;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <dv-decoration-11 style="width:574px;height:88px" :color="[]"></dv-decoration-11>
                </div>
            </div>
            <div _tmplitem="56" class="bigitem" style="top: 731px; left: 951px; width: 448px; height: 304px; transform: translate(0px, 0px); z-index: 1017;">
                <div _tmplitem="56" class="itemcontent " style="opacity:1;border-radius:0px;border-width:0px ;border-style:solid ;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <myechart _tmplitem="39" ref="sel16836359447154" :options="fromData.sel16836359447154"></myechart>
                </div>
            </div>
            <div _tmplitem="56" class="bigitem" style="top: 732px; left: 1418px; width: 466px; height: 303px; transform: translate(0px, 0px); z-index: 1016;">
                <div _tmplitem="56" class="itemcontent " style="opacity:1;border-radius:0px;border-width:0px ;border-style:solid ;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <myechart _tmplitem="40" ref="sel168363514521976" :options="fromData.sel168363514521976"></myechart>
                </div>
            </div>
            <div _tmplitem="56" class="bigitem" style="top: 419px; left: 26px; width: 396px; height: 297px; transform: translate(0px, 0px); z-index: 1015;">
                <div _tmplitem="56" class="itemcontent " style="opacity:1;border-radius:0px;border-width:0px ;border-style:solid ;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <myechart _tmplitem="41" ref="sel168363456931576" :options="fromData.sel168363456931576"></myechart>
                </div>
            </div>
            <div _tmplitem="56" class="bigitem" style="top: 139px; left: 1199px; width: 300px; height: 40px; transform: translate(0px, 0px); z-index: 1014;">
                <div _tmplitem="56" class="itemcontent " style="opacity:1;font-size:12px ;color:rgb(255, 255, 255) ;border-radius:0px;border-width:0px ;border-style:solid ;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <titlecontrol _tmplitem="42" ref="sel168355722387881" :w="300" :h="40" :val="fromData.sel168355722387881" cssstyle="color: rgb(255, 255, 255); overflow: unset; text-overflow: unset; white-space: unset; background-image: none; background-clip: unset; -webkit-text-fill-color: initial;white-space:nowrap;"></titlecontrol>
                </div>
            </div>
            <div _tmplitem="56" class="bigitem" style="top: 143px; left: 535px; width: 300px; height: 40px; transform: translate(0px, 0px); z-index: 1013;">
                <div _tmplitem="56" class="itemcontent " style="opacity:1;font-size:12px ;color:rgb(255, 255, 255) ;border-radius:0px;border-width:0px ;border-style:solid ;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <titlecontrol _tmplitem="43" ref="sel168355721428920" :w="300" :h="40" :val="fromData.sel168355721428920" cssstyle="color: rgb(255, 255, 255); overflow: unset; text-overflow: unset; white-space: unset; background-image: none; background-clip: unset; -webkit-text-fill-color: initial;white-space:nowrap;"></titlecontrol>
                </div>
            </div>
            <div _tmplitem="56" class="bigitem" style="top: 143px; left: 869px; width: 300px; height: 40px; transform: translate(0px, 0px); z-index: 1012;">
                <div _tmplitem="56" class="itemcontent " style="opacity:0;font-size:12px ;color:rgb(255, 255, 255) ;border-radius:0px;border-width:0px ;border-style:solid ;background-color:rgba(196, 85, 85, 0);--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);"> </div>
            </div>
            <div _tmplitem="56" class="bigitem" style="top: 731px; left: 482px; width: 451px; height: 305px; transform: translate(0px, 0px); z-index: 1011;">
                <div _tmplitem="56" class="itemcontent " style="opacity:1;height:190pxpx;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <scrollgridlist _tmplitem="45" :gridlist="fromData.sel168355702094078">
                        <scrollgridcolumn _tmplitem="45" prop="aa" lable="测试哈哈"> </scrollgridcolumn>
                        <scrollgridcolumn _tmplitem="45" prop="bb" lable="测试哈哈"> </scrollgridcolumn>
                        <scrollgridcolumn _tmplitem="45" prop="cc" lable="测试哈哈"> </scrollgridcolumn>
                    </scrollgridlist>
                </div>
            </div>
            <div _tmplitem="56" class="bigitem" style="top: 727px; left: 1414px; width: 473px; height: 310px; transform: translate(0px, 0px); z-index: 1010;">
                <div _tmplitem="56" class="itemcontent " style="opacity:1;background-color:transparent;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <dv-border-box-8 :reverse="false" style="width:473px;height:310px" backgroundcolor="" :color="[]"></dv-border-box-8>
                </div>
            </div>
            <div _tmplitem="56" class="bigitem" style="top: 1348px; left: 885px; width: 426px; height: 278px; transform: translate(0px, 0px); z-index: 109;">
                <div _tmplitem="56" class="itemcontent " style="opacity:1;height:190pxpx;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <!-- <scrollgridlist _tmplitem="47" :gridlist="fromData.sel168355687536546">
                        <scrollgridcolumn _tmplitem="47" prop="aa" lable="测试哈哈"> </scrollgridcolumn>
                        <scrollgridcolumn _tmplitem="47" prop="bb" lable="测试哈哈"> </scrollgridcolumn>
                        <scrollgridcolumn _tmplitem="47" prop="cc" lable="测试哈哈"> </scrollgridcolumn>
                    </scrollgridlist> -->
                    
                </div>
                
            </div>
            <div _tmplitem="56" class="bigitem" style="top: 644px; left: 26px; width: 411px; height: 156px; transform: translate(0px, 0px); z-index: 108;">
                <div _tmplitem="56" class="itemcontent " style="opacity:1;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <dv-decoration-2 style="width:411px;height:156px" :reverse="false" :color="[]">
                    
                    </dv-decoration-2>
                </div>
            </div>
            <div _tmplitem="56" class="bigitem" style="top: 731px; left: 31px; width: 394px; height: 315px; transform: translate(0px, 0px); z-index: 107;">
                <div _tmplitem="56" class="itemcontent " style="opacity:1;border-radius:0px;border-width:0px ;border-style:solid ;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <myechart _tmplitem="49" ref="sel168355658638334" :options="fromData.sel168355658638334"></myechart>
                </div>
            </div>
            <div _tmplitem="56" class="bigitem" style="top: 121px; left: 27px; width: 402px; height: 291px; transform: translate(0px, 0px); z-index: 106;">
                <div _tmplitem="56" class="itemcontent " style="opacity:1;border-radius:0px;border-width:0px ;border-style:solid ;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <myechart _tmplitem="50" ref="sel168355613018833" :options="weatherData"></myechart>
                </div>
            </div>
            <div _tmplitem="56" class="bigitem" style="top: 410px; left: 27px; width: 344px; height: 16px; transform: translate(0px, 0px); z-index: 105;">
                <div _tmplitem="56" class="itemcontent " style="opacity:1;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <dv-decoration-2 style="width:344px;height:16px" :reverse="false" :color="[]"></dv-decoration-2>
                </div>
            </div>
            <div _tmplitem="56" class="bigitem" style="top: 728px; left: 946px; width: 455px; height: 310px; transform: translate(0px, 0px); z-index: 104;">
                <div _tmplitem="56" class="itemcontent " style="opacity:1;background-color:transparent;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <dv-border-box-8 :reverse="false" style="width:455px;height:310px" backgroundcolor="" :color="[]"></dv-border-box-8>
                </div>
            </div>
            <div _tmplitem="56" class="bigitem" style="top: 728px; left: 477px; width: 455px; height: 310px; transform: translate(0px, 0px); z-index: 103;">
                <div _tmplitem="56" class="itemcontent " style="opacity:1;background-color:transparent;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <dv-border-box-8 :reverse="false" style="width:455px;height:310px" backgroundcolor="" :color="[]"></dv-border-box-8>
                </div>
            </div>
            <div _tmplitem="56" class="bigitem" style="top: 97px; left: 4px; width: 449px; height: 977px; transform: translate(0px, 0px); z-index: 102;">
                <div _tmplitem="56" class="itemcontent " style="opacity:1;background-color:transparent;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <dv-border-box-3 style="width:449px;height:977px" backgroundcolor="" :color="[]"></dv-border-box-3>
                </div>
            </div>
            <div _tmplitem="56" class="bigitem" style="top: 100px; left: 451px; width: 1465px; height: 971px; transform: translate(0px, 0px); z-index: 101;">
                <div _tmplitem="56" class="itemcontent " style="opacity:1;background-color:transparent;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <dv-border-box-3 style="width:1465px;height:971px" backgroundcolor="" :color="[]">
                        <iframe style="width:1465px;height:971px" src="http://localhost:8080/ybtsjjz.html?t=Bearer%20eyJhbGciOiJIUzUxMiJ9.eyJqdGkiOiJkNGVlMDk1YmZkNDY0OTU1ODM3ZjYwNTRlMThiODc3NSIsInVzZXIiOiJhZG1pbiIsInN1YiI6ImFkbWluIn0.rZezTvfsd42R4sZZZE3eZTpllS6o0rMzv4OfZKpeklvhCasRytBx2v55-oujZBIVPY0MJg16zF5Fm4p1iUA1hw" frameborder="0"></iframe>
                    </dv-border-box-3>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import myechart from '@/components/myechart/newindex.vue'
    import titlecontrol from '@/components/titlecontrol.vue'
    import horseindex from '@/components/horseindex.vue'
    import textareaindex from '@/components/textareaindex.vue'
    import backgroundunit1 from '@/components/backgroundunit/backgroundunit1.vue'
    import backgroundunit2 from '@/components/backgroundunit/backgroundunit2.vue'
    import backgroundunit3 from '@/components/backgroundunit/backgroundunit3.vue'
    import backgroundunit4 from '@/components/backgroundunit/backgroundunit4.vue'
    import backgroundunit5 from '@/components/backgroundunit/backgroundunit5.vue'
    import backgroundunit7 from '@/components/backgroundunit/backgroundunit7.vue'
    import backgroundunit8 from '@/components/backgroundunit/backgroundunit8.vue'
    import backgroundunit9 from '@/components/backgroundunit/backgroundunit9.vue'
    import backgroundunit10 from '@/components/backgroundunit/backgroundunit10.vue'
    import backgroundunit11 from '@/components/backgroundunit/backgroundunit11.vue'
    import backgroundunit12 from '@/components/backgroundunit/backgroundunit12.vue'
    import myfabric from '@/components/myfabric/hotspot.vue'
    import bigimg from '@/components/bigImg.vue'
    import scrollgridlist from '@/components/scrollgridlist/index.vue'
    import scrollgridcolumn from '@/components/scrollgridlist/scrollgridcolumn.vue'
    import { reqCompare, reqWeather } from '../api/index.js'
    export default {
        data() {
            return {
                "w": 1920,
                "css": "",
                "h": 1080,
                "bg": "http://f.kyform.cn/2023-05-08/fa9c94f3-c866-4d6f-9610-81c180ef1830.png",
                "bgColor": "rgba(13, 42, 67)",
                "fromData": {
                    "sel16836359447154": {
                        "tooltip": {
                            "trigger": "axis",
                            "axisPointer": {
                                "type": "shadow"
                            }
                        },
                        "legend": {
                            "data": ["接入率", "在线率", "完好率"],
                            "align": "right",
                            "right": 10,
                            "textStyle": {
                                "color": "#fff"
                            },
                            "itemWidth": 10,
                            "itemHeight": 10,
                            "itemGap": 35
                        },
                        "grid": {
                            "left": "3%",
                            "right": "4%",
                            "bottom": "3%",
                            "containLabel": true
                        },
                        "xAxis": [{
                            "type": "category",
                            "data": ["喀什市", "疏附县", "疏勒县", "英吉沙县", "泽普县", "岳普湖县", "巴楚县", "伽师县", "叶城县", "莎车县 "],
                            "axisLine": {
                                "show": true,
                                "lineStyle": {
                                    "color": "#fff",
                                    "width": 1,
                                    "type": "solid"
                                }
                            },
                            "axisTick": {
                                "show": false
                            },
                            "axisLabel": {
                                "show": true,
                                "textStyle": {
                                    "color": "#fff"
                                },
                                "color": "#fff"
                            }
                        }],
                        "yAxis": [{
                            "type": "value",
                            "axisLabel": {
                                "formatter": "{value} %",
                                "color": "#fff"
                            },
                            "axisTick": {
                                "show": false
                            },
                            "axisLine": {
                                "show": false,
                                "lineStyle": {
                                    "color": "#fff",
                                    "width": 1,
                                    "type": "solid"
                                }
                            },
                            "splitLine": {
                                "lineStyle": {
                                    "color": "#063374"
                                }
                            }
                        }],
                        "series": [{
                            "name": "接入率",
                            "type": "bar",
                            "data": [20, 50, 80, 58, 83, 68, 57, 80, 42, 66],
                            "barWidth": 10,
                            "barGap": 1,
                            "itemStyle": {
                                "normal": {
                                    "color": "rgb(73, 146, 255)",
                                    "opacity": 1
                                },
                                "color": "rgb(73, 146, 255)"
                            }
                        }, {
                            "name": "在线率",
                            "type": "bar",
                            "data": [50, 70, 60, 61, 75, 87, 60, 62, 86, 46],
                            "barWidth": 10,
                            "barGap": 1,
                            "itemStyle": {
                                "normal": {
                                    "color": "rgb(124, 255, 178)",
                                    "opacity": 1
                                },
                                "color": "rgb(124, 255, 178)"
                            }
                        }, {
                            "name": "完好率",
                            "type": "bar",
                            "data": [70, 48, 73, 68, 53, 47, 50, 72, 96, 86],
                            "barWidth": 10,
                            "barGap": 1,
                            "itemStyle": {
                                "normal": {
                                    "color": "rgb(253, 221, 96)",
                                    "opacity": 1
                                },
                                "color": "rgb(253, 221, 96)"
                            }
                        }]
                    },
                    "sel168363514521976": {
                        "tooltip": {},
                        "visualMap": {
                            "max": 20,
                            "inRange": {
                                "color": ["#313695", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8", "#ffffbf", "#fee090", "#fdae61", "#f46d43", "#d73027", "#a50026"]
                            }
                        },
                        "xAxis3D": {
                            "type": "category",
                            "data": ["12a", "1a", "2a", "3a", "4a", "5a", "6a", "7a", "8a", "9a", "10a", "11a", "12p", "1p", "2p", "3p", "4p", "5p", "6p", "7p", "8p", "9p", "10p", "11p"]
                        },
                        "yAxis3D": {
                            "type": "category",
                            "data": ["Saturday", "Friday", "Thursday", "Wednesday", "Tuesday", "Monday", "Sunday"]
                        },
                        "zAxis3D": {
                            "type": "value"
                        },
                        "grid3D": {
                            "boxWidth": 200,
                            "boxDepth": 80,
                            "light": {
                                "main": {
                                    "intensity": 1.2
                                },
                                "ambient": {
                                    "intensity": 0.3
                                }
                            }
                        },
                        "series": [{
                            "type": "bar3D",
                            "data": [{
                                "value": [0, 0, 5]
                            }, {
                                "value": [1, 0, 1]
                            }, {
                                "value": [2, 0, 0]
                            }, {
                                "value": [3, 0, 0]
                            }, {
                                "value": [4, 0, 0]
                            }, {
                                "value": [5, 0, 0]
                            }, {
                                "value": [6, 0, 0]
                            }, {
                                "value": [7, 0, 0]
                            }, {
                                "value": [8, 0, 0]
                            }, {
                                "value": [9, 0, 0]
                            }, {
                                "value": [10, 0, 0]
                            }, {
                                "value": [11, 0, 2]
                            }, {
                                "value": [12, 0, 4]
                            }, {
                                "value": [13, 0, 1]
                            }, {
                                "value": [14, 0, 1]
                            }, {
                                "value": [15, 0, 3]
                            }, {
                                "value": [16, 0, 4]
                            }, {
                                "value": [17, 0, 6]
                            }, {
                                "value": [18, 0, 4]
                            }, {
                                "value": [19, 0, 4]
                            }, {
                                "value": [20, 0, 3]
                            }, {
                                "value": [21, 0, 3]
                            }, {
                                "value": [22, 0, 2]
                            }, {
                                "value": [23, 0, 5]
                            }, {
                                "value": [0, 1, 7]
                            }, {
                                "value": [1, 1, 0]
                            }, {
                                "value": [2, 1, 0]
                            }, {
                                "value": [3, 1, 0]
                            }, {
                                "value": [4, 1, 0]
                            }, {
                                "value": [5, 1, 0]
                            }, {
                                "value": [6, 1, 0]
                            }, {
                                "value": [7, 1, 0]
                            }, {
                                "value": [8, 1, 0]
                            }, {
                                "value": [9, 1, 0]
                            }, {
                                "value": [10, 1, 5]
                            }, {
                                "value": [11, 1, 2]
                            }, {
                                "value": [12, 1, 2]
                            }, {
                                "value": [13, 1, 6]
                            }, {
                                "value": [14, 1, 9]
                            }, {
                                "value": [15, 1, 11]
                            }, {
                                "value": [16, 1, 6]
                            }, {
                                "value": [17, 1, 7]
                            }, {
                                "value": [18, 1, 8]
                            }, {
                                "value": [19, 1, 12]
                            }, {
                                "value": [20, 1, 5]
                            }, {
                                "value": [21, 1, 5]
                            }, {
                                "value": [22, 1, 7]
                            }, {
                                "value": [23, 1, 2]
                            }, {
                                "value": [0, 2, 1]
                            }, {
                                "value": [1, 2, 1]
                            }, {
                                "value": [2, 2, 0]
                            }, {
                                "value": [3, 2, 0]
                            }, {
                                "value": [4, 2, 0]
                            }, {
                                "value": [5, 2, 0]
                            }, {
                                "value": [6, 2, 0]
                            }, {
                                "value": [7, 2, 0]
                            }, {
                                "value": [8, 2, 0]
                            }, {
                                "value": [9, 2, 0]
                            }, {
                                "value": [10, 2, 3]
                            }, {
                                "value": [11, 2, 2]
                            }, {
                                "value": [12, 2, 1]
                            }, {
                                "value": [13, 2, 9]
                            }, {
                                "value": [14, 2, 8]
                            }, {
                                "value": [15, 2, 10]
                            }, {
                                "value": [16, 2, 6]
                            }, {
                                "value": [17, 2, 5]
                            }, {
                                "value": [18, 2, 5]
                            }, {
                                "value": [19, 2, 5]
                            }, {
                                "value": [20, 2, 7]
                            }, {
                                "value": [21, 2, 4]
                            }, {
                                "value": [22, 2, 2]
                            }, {
                                "value": [23, 2, 4]
                            }, {
                                "value": [0, 3, 7]
                            }, {
                                "value": [1, 3, 3]
                            }, {
                                "value": [2, 3, 0]
                            }, {
                                "value": [3, 3, 0]
                            }, {
                                "value": [4, 3, 0]
                            }, {
                                "value": [5, 3, 0]
                            }, {
                                "value": [6, 3, 0]
                            }, {
                                "value": [7, 3, 0]
                            }, {
                                "value": [8, 3, 1]
                            }, {
                                "value": [9, 3, 0]
                            }, {
                                "value": [10, 3, 5]
                            }, {
                                "value": [11, 3, 4]
                            }, {
                                "value": [12, 3, 7]
                            }, {
                                "value": [13, 3, 14]
                            }, {
                                "value": [14, 3, 13]
                            }, {
                                "value": [15, 3, 12]
                            }, {
                                "value": [16, 3, 9]
                            }, {
                                "value": [17, 3, 5]
                            }, {
                                "value": [18, 3, 5]
                            }, {
                                "value": [19, 3, 10]
                            }, {
                                "value": [20, 3, 6]
                            }, {
                                "value": [21, 3, 4]
                            }, {
                                "value": [22, 3, 4]
                            }, {
                                "value": [23, 3, 1]
                            }, {
                                "value": [0, 4, 1]
                            }, {
                                "value": [1, 4, 3]
                            }, {
                                "value": [2, 4, 0]
                            }, {
                                "value": [3, 4, 0]
                            }, {
                                "value": [4, 4, 0]
                            }, {
                                "value": [5, 4, 1]
                            }, {
                                "value": [6, 4, 0]
                            }, {
                                "value": [7, 4, 0]
                            }, {
                                "value": [8, 4, 0]
                            }, {
                                "value": [9, 4, 2]
                            }, {
                                "value": [10, 4, 4]
                            }, {
                                "value": [11, 4, 4]
                            }, {
                                "value": [12, 4, 2]
                            }, {
                                "value": [13, 4, 4]
                            }, {
                                "value": [14, 4, 4]
                            }, {
                                "value": [15, 4, 14]
                            }, {
                                "value": [16, 4, 12]
                            }, {
                                "value": [17, 4, 1]
                            }, {
                                "value": [18, 4, 8]
                            }, {
                                "value": [19, 4, 5]
                            }, {
                                "value": [20, 4, 3]
                            }, {
                                "value": [21, 4, 7]
                            }, {
                                "value": [22, 4, 3]
                            }, {
                                "value": [23, 4, 0]
                            }, {
                                "value": [0, 5, 2]
                            }, {
                                "value": [1, 5, 1]
                            }, {
                                "value": [2, 5, 0]
                            }, {
                                "value": [3, 5, 3]
                            }, {
                                "value": [4, 5, 0]
                            }, {
                                "value": [5, 5, 0]
                            }, {
                                "value": [6, 5, 0]
                            }, {
                                "value": [7, 5, 0]
                            }, {
                                "value": [8, 5, 2]
                            }, {
                                "value": [9, 5, 0]
                            }, {
                                "value": [10, 5, 4]
                            }, {
                                "value": [11, 5, 1]
                            }, {
                                "value": [12, 5, 5]
                            }, {
                                "value": [13, 5, 10]
                            }, {
                                "value": [14, 5, 5]
                            }, {
                                "value": [15, 5, 7]
                            }, {
                                "value": [16, 5, 11]
                            }, {
                                "value": [17, 5, 6]
                            }, {
                                "value": [18, 5, 0]
                            }, {
                                "value": [19, 5, 5]
                            }, {
                                "value": [20, 5, 3]
                            }, {
                                "value": [21, 5, 4]
                            }, {
                                "value": [22, 5, 2]
                            }, {
                                "value": [23, 5, 0]
                            }, {
                                "value": [0, 6, 1]
                            }, {
                                "value": [1, 6, 0]
                            }, {
                                "value": [2, 6, 0]
                            }, {
                                "value": [3, 6, 0]
                            }, {
                                "value": [4, 6, 0]
                            }, {
                                "value": [5, 6, 0]
                            }, {
                                "value": [6, 6, 0]
                            }, {
                                "value": [7, 6, 0]
                            }, {
                                "value": [8, 6, 0]
                            }, {
                                "value": [9, 6, 0]
                            }, {
                                "value": [10, 6, 1]
                            }, {
                                "value": [11, 6, 0]
                            }, {
                                "value": [12, 6, 2]
                            }, {
                                "value": [13, 6, 1]
                            }, {
                                "value": [14, 6, 3]
                            }, {
                                "value": [15, 6, 4]
                            }, {
                                "value": [16, 6, 0]
                            }, {
                                "value": [17, 6, 0]
                            }, {
                                "value": [18, 6, 0]
                            }, {
                                "value": [19, 6, 0]
                            }, {
                                "value": [20, 6, 1]
                            }, {
                                "value": [21, 6, 2]
                            }, {
                                "value": [22, 6, 2]
                            }, {
                                "value": [23, 6, 6]
                            }],
                            "shading": "color",
                            "label": {
                                "show": false,
                                "textStyle": {
                                    "fontSize": 16,
                                    "borderWidth": 1,
                                    "color": "#fff"
                                }
                            },
                            "itemStyle": {
                                "opacity": 0.4,
                                "color": "rgb(73, 146, 255)"
                            },
                            "emphasis": {
                                "label": {
                                    "textStyle": {
                                        "fontSize": 20,
                                        "color": "#fff"
                                    }
                                },
                                "itemStyle": {
                                    "color": "rgb(73, 146, 255)"
                                }
                            }
                        }]
                    },
                    "sel168363456931576": {
                        "title": {
                            "text": "自定义的折柱混合--BarLine",
                            "left": "center",
                            "y": "10",
                            "textStyle": {
                                "color": "#fff"
                            }
                        },
                        "color": "#384757",
                        "tooltip": {
                            "trigger": "axis",
                            "axisPointer": {
                                "type": "cross",
                                "crossStyle": {
                                    "color": "#384757"
                                }
                            }
                        },
                        "legend": {
                            "data": [{
                                "name": "待处理",
                                "icon": "circle",
                                "textStyle": {
                                    "color": "#fff"
                                }
                            }, {
                                "name": "已处理",
                                "icon": "circle",
                                "textStyle": {
                                    "color": "#fff"
                                }
                            }, {
                                "name": "完成率",
                                "icon": "circle",
                                "textStyle": {
                                    "color": "#fff"
                                }
                            }],
                            "top": "10%",
                            "textStyle": {
                                "color": "#fff"
                            }
                        },
                        "xAxis": [{
                            "type": "category",
                            "data": ["1街", "2街", "3街", "4街", "5街", "6街"],
                            "axisPointer": {
                                "type": "shadow"
                            },
                            "axisLabel": {
                                "show": true,
                                "textStyle": {
                                    "color": "#fff"
                                },
                                "color": "#fff"
                            }
                        }],
                        "yAxis": [{
                            "type": "value",
                            "name": "不文明现象",
                            "nameTextStyle": {
                                "color": "#fff"
                            },
                            "min": 0,
                            "max": 50,
                            "interval": 10,
                            "axisLabel": {
                                "show": true,
                                "textStyle": {
                                    "color": "#fff"
                                },
                                "color": "#fff"
                            },
                            "axisLine": {
                                "show": true
                            },
                            "splitLine": {
                                "lineStyle": {
                                    "color": "#7d838b"
                                }
                            }
                        }, {
                            "type": "value",
                            "name": "完成率",
                            "show": true,
                            "axisLabel": {
                                "show": true,
                                "textStyle": {
                                    "color": "#fff"
                                },
                                "color": "#fff"
                            }
                        }],
                        "grid": {
                            "top": "20%"
                        },
                        "series": [{
                            "name": "待处理",
                            "type": "bar",
                            "data": [4, 6, 36, 6, 8, 6],
                            "barWidth": "auto",
                            "itemStyle": {
                                "normal": {
                                    "color": "rgb(73, 146, 255)"
                                },
                                "color": "rgb(73, 146, 255)"
                            }
                        }, {
                            "name": "已处理",
                            "type": "bar",
                            "data": [4, 2, 36, 6, 8, 6],
                            "barWidth": "auto",
                            "itemStyle": {
                                "normal": {
                                    "color": "rgb(124, 255, 178)"
                                },
                                "color": "rgb(124, 255, 178)"
                            },
                            "barGap": "0"
                        }, {
                            "name": "完成率",
                            "type": "line",
                            "yAxisIndex": 1,
                            "data": [100, 33, 100, 100, 100, 100],
                            "itemStyle": {
                                "normal": {
                                    "color": "rgb(253, 221, 96)"
                                },
                                "color": "rgb(253, 221, 96)"
                            },
                            "smooth": true
                        }]
                    },
                    "sel168355722387881": "数据更新时间",
                    "sel168355721428920": "当前时间",
                    "sel168355702094078": [],
                    "sel168355687536546": [],
                    "sel168355658638334": {
                        "tooltip": {},
                        "grid": {
                            "top": "8%",
                            "left": "1%",
                            "right": "1%",
                            "bottom": "8%",
                            "containLabel": true
                        },
                        "legend": {
                            "itemGap": 50,
                            "data": ["注册总量", "最新注册量"],
                            "textStyle": {
                                "color": "#fff",
                                "borderColor": "#fff"
                            }
                        },
                        "xAxis": [{
                            "type": "category",
                            "boundaryGap": true,
                            "axisLine": {
                                "show": true,
                                "lineStyle": {
                                    "color": "#fff"
                                }
                            },
                            "axisLabel": {
                                "textStyle": {
                                    "color": "#fff",
                                    "margin": 15
                                },
                                "color": "#fff"
                            },
                            "axisTick": {
                                "show": false
                            },
                            "data": ["1月", "2月", "3月", "4月", "5月", "6月", "7月"]
                        }],
                        "yAxis": [{
                            "type": "value",
                            "min": 0,
                            "splitNumber": 7,
                            "splitLine": {
                                "show": true,
                                "lineStyle": {
                                    "color": "#0a3256"
                                }
                            },
                            "axisLine": {
                                "show": false
                            },
                            "axisLabel": {
                                "margin": 20,
                                "textStyle": {
                                    "color": "#fff"
                                },
                                "color": "#fff"
                            },
                            "axisTick": {
                                "show": false
                            }
                        }],
                        "series": [{
                            "name": "注册总量",
                            "type": "line",
                            "showAllSymbol": true,
                            "symbol": "emptyCircle",
                            "symbolSize": 6,
                            "lineStyle": {
                                "normal": {
                                    "color": "#28ffb3"
                                },
                                "borderColor": "#f0f",
                                "color": "rgb(73, 146, 255)"
                            },
                            "label": {
                                "show": true,
                                "position": "top",
                                "textStyle": {
                                    "color": "#fff"
                                }
                            },
                            "itemStyle": {
                                "normal": {
                                    "color": "rgb(73, 146, 255)"
                                },
                                "color": "rgb(73, 146, 255)"
                            },
                            "tooltip": {
                                "show": false
                            },
                            "areaStyle": {
                                "normal": {
                                    "color": {
                                        "colorStops": [{
                                            "offset": 0,
                                            "color": "rgba(0,154,120,1)"
                                        }, {
                                            "offset": 1,
                                            "color": "rgba(0,0,0, 0)"
                                        }],
                                        "x": 0,
                                        "y": 0,
                                        "x2": 0,
                                        "y2": 1,
                                        "type": "linear",
                                        "global": false
                                    },
                                    "shadowColor": "rgba(53,142,215, 0.9)",
                                    "shadowBlur": 20
                                }
                            },
                            "data": [393, 438, 485, 631, 689, 824, 987]
                        }, {
                            "name": "最新注册量",
                            "type": "bar",
                            "barWidth": 20,
                            "tooltip": {
                                "show": false
                            },
                            "label": {
                                "show": true,
                                "position": "top",
                                "textStyle": {
                                    "color": "#fff"
                                }
                            },
                            "itemStyle": {
                                "normal": {
                                    "color": "rgb(124, 255, 178)"
                                },
                                "color": "rgb(124, 255, 178)"
                            },
                            "data": [200, 382, 102, 267, 186, 315, 316]
                        }]
                    },
                    "sel168355613018833": {
                        "title": {
                            "text": "武汉市天气预报",
                            "textStyle": {
                                "fontWeight": "normal",
                                "fontSize": 16,
                                "color": "#fff"
                            },
                            "left": "6%"
                        },
                        "tooltip": {
                            "trigger": "axis",
                            "axisPointer": {
                                "lineStyle": {
                                    "color": "#57617B"
                                }
                            }
                        },
                        "legend": {
                            "icon": "rect",
                            "itemWidth": 20,
                            "itemHeight": 16,
                            "itemGap": 13,
                            "data": ["空气质量", "高温", "低温", "日出", "日落"],
                            "right": "4%",
                            "textStyle": {
                                "fontSize": 16,
                                "color": "#fff"
                            }
                        },
                        "grid": {
                            "left": "3%",
                            "right": "4%",
                            "bottom": "3%",
                            "containLabel": true
                        },
                        "xAxis": [{
                            "type": "category",
                            "boundaryGap": false,
                            "axisLine": {
                                "onZero": false,
                                "lineStyle": {
                                    "color": "#fff"
                                }
                            },
                            "data": ["星期三", "星期四", "星期五", "星期六", "星期日"]
                        }],
                        "yAxis": [{
                            "type": "value",
                            "max": 40,
                            "name": "单位（℃）",
                            "axisTick": {
                                "show": false
                            },
                            "axisLine": {
                                "lineStyle": {
                                    "color": "#fff"
                                }
                            },
                            "axisLabel": {
                                "margin": 10,
                                "textStyle": {
                                    "fontSize": 14,
                                    "color": "#fff"
                                },
                                "color": "#fff"
                            },
                            "splitLine": {
                                "lineStyle": {
                                    "color": "#57617B"
                                }
                            }
                        }, {
                            "type": "value",
                            "name": "单位（PPI）",
                            "splitLine": {
                                "show": false
                            }
                        }],
                        "series": [{
                            "name": "空气质量",
                            "type": "line",
                            "yAxisIndex": 1,
                            "smooth": true,
                            "symbol": "circle",
                            "symbolSize": 5,
                            "showSymbol": false,
                            "lineStyle": {
                                "normal": {
                                    "width": 2
                                },
                                "color": "rgb(73, 146, 255)"
                            },
                            "areaStyle": {
                                "normal": {
                                    "origin": "end",
                                    "color": {
                                        "colorStops": [{
                                            "offset": 0,
                                            "color": "rgba(235,235,21, 0.8)"
                                        }, {
                                            "offset": 0.8,
                                            "color": "rgba(16,97,204, 0.8)"
                                        }],
                                        "x": 0,
                                        "y": 0,
                                        "x2": 0,
                                        "y2": 1,
                                        "type": "linear",
                                        "global": false
                                    },
                                    "shadowColor": "rgba(0, 0, 0, 0.1)",
                                    "shadowBlur": 10
                                }
                            },
                            "itemStyle": {
                                "normal": {
                                    "color": "rgb(73, 146, 255)"
                                },
                                "emphasis": {
                                    "color": "rgb(0,196,132)",
                                    "borderColor": "rgba(0,196,132,0.2)",
                                    "extraCssText": "box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);",
                                    "borderWidth": 10
                                },
                                "color": "rgb(73, 146, 255)"
                            },
                            "data": [54, 43, 40, 67, 110]
                        }, {
                            "name": "高温",
                            "type": "line",
                            "smooth": true,
                            "symbol": "circle",
                            "symbolSize": 5,
                            "showSymbol": false,
                            "lineStyle": {
                                "normal": {
                                    "width": 2
                                },
                                "color": "rgb(124, 255, 178)"
                            },
                            "areaStyle": {
                                "normal": {
                                    "origin": "start",
                                    "color": {
                                        "colorStops": [{
                                            "offset": 0,
                                            "color": "rgba(205,52,42, 0.8)"
                                        }, {
                                            "offset": 1,
                                            "color": "rgba(235,235,21, 0)"
                                        }],
                                        "x": 0,
                                        "y": 0,
                                        "x2": 0,
                                        "y2": 1,
                                        "type": "linear",
                                        "global": false
                                    }
                                }
                            },
                            "itemStyle": {
                                "normal": {
                                    "color": "rgb(124, 255, 178)"
                                },
                                "emphasis": {
                                    "color": "rgb(99,250,235)",
                                    "borderColor": "rgba(99,250,235,0.2)",
                                    "extraCssText": "box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);",
                                    "borderWidth": 10
                                },
                                "color": "rgb(124, 255, 178)"
                            },
                            "data": [7, 5, 2, 1, 1]
                        }, {
                            "name": "低温",
                            "type": "line",
                            "smooth": true,
                            "symbol": "circle",
                            "symbolSize": 5,
                            "showSymbol": false,
                            "lineStyle": {
                                "normal": {
                                    "width": 2
                                },
                                "color": "rgb(253, 221, 96)"
                            },
                            "areaStyle": {
                                "normal": {
                                    "origin": "start",
                                    "color": {
                                        "colorStops": [{
                                            "offset": 0,
                                            "color": "#424956"
                                        }, {
                                            "offset": 1,
                                            "color": "#424956"
                                        }],
                                        "x": 0,
                                        "y": 0,
                                        "x2": 0,
                                        "y2": 1,
                                        "type": "linear",
                                        "global": false
                                    }
                                }
                            },
                            "itemStyle": {
                                "normal": {
                                    "color": "rgb(253, 221, 96)"
                                },
                                "emphasis": {
                                    "color": "rgb(99,250,235)",
                                    "borderColor": "rgba(99,250,235,0.2)",
                                    "extraCssText": "box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);",
                                    "borderWidth": 10
                                },
                                "color": "rgb(253, 221, 96)"
                            },
                            "data": [4, 0, -2, -2, -5]
                        }]
                    }
                },
                "weatherData": {
                        "title": {
                            "text": "叶巴滩天气预报",
                            "textStyle": {
                                "fontWeight": "normal",
                                "fontSize": 16,
                                "color": "#fff"
                            },
                            "left": "6%"
                        },
                        "tooltip": {
                            "trigger": "axis",
                            "axisPointer": {
                                "lineStyle": {
                                    "color": "#57617B"
                                }
                            }
                        },
                        "legend": {
                            "icon": "rect",
                            "itemWidth": 20,
                            "itemHeight": 16,
                            "itemGap": 13,
                            "data": ["空气质量", "高温", "低温", "日出", "日落"],
                            "right": "4%",
                            "textStyle": {
                                "fontSize": 16,
                                "color": "#fff"
                            }
                        },
                        "grid": {
                            "left": "3%",
                            "right": "4%",
                            "bottom": "3%",
                            "containLabel": true
                        },
                        "xAxis": [{
                            "type": "category",
                            "boundaryGap": false,
                            "axisLine": {
                                "onZero": false,
                                "lineStyle": {
                                    "color": "#fff"
                                }
                            },
                            "data": ["星期三", "星期四", "星期五", "星期六", "星期日"]
                        }],
                        "yAxis": [{
                            "type": "value",
                            "max": 40,
                            "name": "单位（℃）",
                            "axisTick": {
                                "show": false
                            },
                            "axisLine": {
                                "lineStyle": {
                                    "color": "#fff"
                                }
                            },
                            "axisLabel": {
                                "margin": 10,
                                "textStyle": {
                                    "fontSize": 14,
                                    "color": "#fff"
                                },
                                "color": "#fff"
                            },
                            "splitLine": {
                                "lineStyle": {
                                    "color": "#57617B"
                                }
                            }
                        }, {
                            "type": "value",
                            "name": "单位（PPI）",
                            "splitLine": {
                                "show": false
                            }
                        }],
                        "series": [{
                            "name": "空气质量",
                            "type": "line",
                            "yAxisIndex": 1,
                            "smooth": true,
                            "symbol": "circle",
                            "symbolSize": 5,
                            "showSymbol": false,
                            "lineStyle": {
                                "normal": {
                                    "width": 2
                                },
                                "color": "rgb(73, 146, 255)"
                            },
                            "areaStyle": {
                                "normal": {
                                    "origin": "end",
                                    "color": {
                                        "colorStops": [{
                                            "offset": 0,
                                            "color": "rgba(235,235,21, 0.8)"
                                        }, {
                                            "offset": 0.8,
                                            "color": "rgba(16,97,204, 0.8)"
                                        }],
                                        "x": 0,
                                        "y": 0,
                                        "x2": 0,
                                        "y2": 1,
                                        "type": "linear",
                                        "global": false
                                    },
                                    "shadowColor": "rgba(0, 0, 0, 0.1)",
                                    "shadowBlur": 10
                                }
                            },
                            "itemStyle": {
                                "normal": {
                                    "color": "rgb(73, 146, 255)"
                                },
                                "emphasis": {
                                    "color": "rgb(0,196,132)",
                                    "borderColor": "rgba(0,196,132,0.2)",
                                    "extraCssText": "box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);",
                                    "borderWidth": 10
                                },
                                "color": "rgb(73, 146, 255)"
                            },
                            "data": [54, 43, 40, 67, 110]
                        }, {
                            "name": "高温",
                            "type": "line",
                            "smooth": true,
                            "symbol": "circle",
                            "symbolSize": 5,
                            "showSymbol": false,
                            "lineStyle": {
                                "normal": {
                                    "width": 2
                                },
                                "color": "rgb(124, 255, 178)"
                            },
                            "areaStyle": {
                                "normal": {
                                    "origin": "start",
                                    "color": {
                                        "colorStops": [{
                                            "offset": 0,
                                            "color": "rgba(205,52,42, 0.8)"
                                        }, {
                                            "offset": 1,
                                            "color": "rgba(235,235,21, 0)"
                                        }],
                                        "x": 0,
                                        "y": 0,
                                        "x2": 0,
                                        "y2": 1,
                                        "type": "linear",
                                        "global": false
                                    }
                                }
                            },
                            "itemStyle": {
                                "normal": {
                                    "color": "rgb(124, 255, 178)"
                                },
                                "emphasis": {
                                    "color": "rgb(99,250,235)",
                                    "borderColor": "rgba(99,250,235,0.2)",
                                    "extraCssText": "box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);",
                                    "borderWidth": 10
                                },
                                "color": "rgb(124, 255, 178)"
                            },
                            "data": [7, 5, 2, 1, 1]
                        }, {
                            "name": "低温",
                            "type": "line",
                            "smooth": true,
                            "symbol": "circle",
                            "symbolSize": 5,
                            "showSymbol": false,
                            "lineStyle": {
                                "normal": {
                                    "width": 2
                                },
                                "color": "rgb(253, 221, 96)"
                            },
                            "areaStyle": {
                                "normal": {
                                    "origin": "start",
                                    "color": {
                                        "colorStops": [{
                                            "offset": 0,
                                            "color": "#424956"
                                        }, {
                                            "offset": 1,
                                            "color": "#424956"
                                        }],
                                        "x": 0,
                                        "y": 0,
                                        "x2": 0,
                                        "y2": 1,
                                        "type": "linear",
                                        "global": false
                                    }
                                }
                            },
                            "itemStyle": {
                                "normal": {
                                    "color": "rgb(253, 221, 96)"
                                },
                                "emphasis": {
                                    "color": "rgb(99,250,235)",
                                    "borderColor": "rgba(99,250,235,0.2)",
                                    "extraCssText": "box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);",
                                    "borderWidth": 10
                                },
                                "color": "rgb(253, 221, 96)"
                            },
                            "data": [4, 0, -2, -2, -5]
                        }]
                    }
            }
        },
        methods: {
            created_sys() {
                ///系统方法 判断页面大小 使其自动适应
                let $this = this
                this.w = this.w === undefined ? 1920 : this.w
                $this.css = `  width: ${$this.w}px;height: ${$this.h}px; ${$this.bg === "" ? "" : "background-image:url(" + $this.bg + ");background-size: contain;"
                    }  transform: scale(${document.body.clientWidth / $this.w});  ${$this.bgColor === ""
                        ? ""
                        : "background-color:" +
                        $this.bgColor +
                        ";left:calc( 50% - " +
                        $this.w / 2 +
                        "px);"
                    }`

                window.addEventListener("resize", () => {
                    $this.css = `  width: ${$this.w}px;height: ${$this.h}px; ${$this.bg === "" ? "" : "background-image:url(" + $this.bg + ");    background-size: contain;"
                        }  transform: scale(${document.body.clientWidth / $this.w}); ${$this.bgColor === ""
                            ? ""
                            : "background-color:" + $this.bgColor + ";"
                        }`
                })
                $this.css = `transform: scale(${document.body.clientWidth / $this.w})`

            },
            async funmounted_sys() {
                let weather = await reqWeather();
                
                this.weatherData.xAxis[0].data = ['5-9', '5-8', '5-7', '5-6', '5-5'];
                let compare = await reqCompare();
                console.log('weather,weather', compare)
            }
        },
        created() {
            this.created_sys()
            if (this.funmounted_sys !== undefined) {
                this.funmounted_sys()
            }
        },
        components: {
            myechart,
            titlecontrol,
            horseindex,
            textareaindex,
            backgroundunit1,
            backgroundunit2,
            backgroundunit3,
            backgroundunit4,
            backgroundunit5,
            backgroundunit7,
            backgroundunit8,
            backgroundunit9,
            backgroundunit10,
            backgroundunit11,
            backgroundunit12,
            bigimg,
            myfabric,
            scrollgridlist,
            scrollgridcolumn
        }
    }
</script>
<style scoped>
    .dv-full-screen-container {
        transform: scale(1);
        position: absolute;
        top: 0px;
        left: 0px;
        overflow: hidden;
        transform-origin: left top;
        z-index: 499;
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        width: 1920px;
        height: 1080px;
        background-color: '#040404';
        background-size: cover;
    }

    .bigitem {
        position: absolute;
        will-change: transform;
        overflow: hidden;
    }

    .layouttable {
        height: 100%;
        display: flex;
    }

    .layouttable .layouttable-item {
        height: 100%;
        position: relative;
        float: left;
    }

    .itemcontent {
        width: 100%;
        height: 100%;
    }
</style>
<style scoped></style>